<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="预约订单" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="bg-[#fff]">
            <up-tabs @click="clickTab" :list="tablist" :scrollable="false" :activeStyle="{color:'#46A7FD'}" :inactiveStyle="{color:'#606266'}" lineColor="#3c9cff"></up-tabs>
        </view>
        <view class="p-[30rpx]">
            <template v-for="(item,index) in list" :key="index"> 
                <AdOrderItem :Item="item" @checkItem="onCheckItem" @Cancel="onCancel"></AdOrderItem>
            </template>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad , onShow , onReachBottom } from '@dcloudio/uni-app';
import AdOrderItem from '@/components/AdOrderItem.vue'
import { GetSojournOrder, GetTravelCancel } from '../../API/sojourn';
const { goback , gohome } = useTab()
const { tablist , list , getList , num , clickTab } = useList()
const { onCheckItem , onCancel , orderCancel} = useEmitBtn()
function useTab(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}
function useList(){
    const tablist = ref([{
        name: '全部',
        type:''
    },{
        name: '已预约',
        type:0
    }])
    const pageObj = reactive({
        queryType:'',
        pageNum:1,
        pageSize:10
    })
    const list = ref([])
    const num = ref(0)
    const getList = async ()=>{
        let { rows , total } = await GetSojournOrder(pageObj)
        list.value = rows
        num.value = total
    }
    const clickTab =  async(res) => {
        pageObj.queryType = res.type
        await getList(pageObj)
    }
    return{
        tablist,
        list,
        pageObj,
        getList,
        clickTab,
        num
    }
}
function useEmitBtn(){
    const onCheckItem = (id)=>{
        console.log('id',id);
        uni.navigateTo({
            url:`/pageOrder/AdvanceOrderItem/AdvanceOrderItem?id=${id}`
        })
    }
    const onCancel = (id)=>{
        uni.showModal({
            title: '提示',
            content: '是否取消订单',
            success: async ({ confirm, cancel }) => {
                if(confirm){
                    await orderCancel(id)
                    uni.showToast({
                        title: '取消成功',
                        icon: 'success',
                        mask: true
                    }),
                    await getList()
                }
            }
        })
    }
    const orderCancel = async (id)=>{
        let { data } = await GetTravelCancel({id:id})
    }
    return{
        onCheckItem,
        onCancel,
        orderCancel
    }
}

onReachBottom( async ()=>{
    if(list.value.length<num){
        let { rows , total } = await GetSojournOrder(pageObj)
        list.value = list.value.concat(rows)
        num.value = total
    }else{
        uni.showToast({
            title:'没有更多数据了!',
            icon:'none'
        })
    }
})

onShow(async()=>{
    await getList()
})
</script>

<style lang="scss" scoped>

</style>